<!-- 
========================================================
  远东街 · 加盟线上启动指南  (v10 · 完整代码 + 移动端适配)
  · 修复上次代码截断导致二维码不渲染
  · 加 media query：≤480px 时流程图自动纵向排列、字体缩小
========================================================
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>远东街 · 加盟线上启动指南</title>
  <style>
    :root{--blue:#003d8e;--red:#c4162b;--bg:#f5f7fb;--text:#333;}
    *{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
    header{background:var(--blue);color:#fff;text-align:center;padding:1.4rem 1rem;}
    header h1{font-size:1.8rem;}
    main{max-width:960px;margin:2rem auto;padding:0 1rem;}
    .flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-bottom:2rem;}
    .box{background:#fff;border:3px solid var(--blue);border-radius:50px;padding:.8rem 1.4rem;min-width:120px;text-align:center;font-weight:600;color:var(--blue);text-decoration:none;transition:.2s;}
    .box:hover{background:var(--blue);color:#fff;}
    .arrow{font-size:1.6rem;color:var(--blue);user-select:none;}
    section{background:#fff;padding:1.4rem 1.2rem;margin-bottom:1.8rem;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.06);}  
    section h2{margin-bottom:.7rem;font-size:1.3rem;color:var(--blue);}  
    details summary{cursor:pointer;font-weight:600;color:var(--blue);margin:.6rem 0;}  
    ol{padding-left:1.1rem;}  
    ul{padding-left:1rem;}
    .back{text-align:right;font-size:.9rem;margin-top:.6rem;}  
    .back a{color:var(--blue);text-decoration:none;}  
    footer{text-align:center;font-size:.75rem;color:#666;padding:1rem;}  
    #qrcode{width:160px;height:160px;margin:0 auto;border:1px solid #ddd;border-radius:8px;}

    /* ======= 移动端适配 ======= */
    @media(max-width:480px){
      header h1{font-size:1.4rem;}
      .box{flex:1 1 100%;min-width:auto;}
      .arrow{display:none;}
      main{padding:0 .6rem;}
      section{padding:1rem .8rem;}
      section h2{font-size:1.15rem;}
    }
  </style>
  <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body id="top">
  <header>
    <h1>远东街 · 加盟线上启动指南</h1>
  </header>

  <main>
    <section>
      <h2>一张图 · 先看整体流程（点圆圈可展开）</h2>
      <div class="flow">
        <a href="#step1" class="box">1 企业微信</a><span class="arrow">→</span>
        <a href="#step2" class="box">2 团购/外卖</a><span class="arrow">→</span>
        <a href="#step3" class="box">3 活动群</a><span class="arrow">→</span>
        <a href="#step4" class="box">4 短视频</a>
      </div>
    </section>

    <!-- STEP 1 -->
    <section id="step1">
      <h2>步骤 1 · 企业微信（扫码加入）</h2>
      <details open>
        <summary>① 扫码添加总部微信</summary>
        <div id="qrcode"></div>
        <p style="text-align:center;margin-top:.4rem;"><small>长按/扫码，备注“XX街区-店长”</small></p>
        <ol>
          <li>扫码添加后，总部会在 24h 内发送【企业微信邀请二维码】。</li>
          <li>收到邀请二维码 → 扫码加入企业微信。</li>
          <li>进入企业微信后，完成实名认证。</li>
        </ol>
      </details>
      <details>
        <summary>② 设置门店资料</summary>
        <p>参考图文手册 👉 <a href="https://doc.weixin.qq.com/doc/w3_AdsAzQa3AGECNmUwWBRapQXq5Q1gr?scode=AHIAYgeZABI0fWDN3TAdsAzQa3AGE" target="_blank">《线上相关设置》</a></p>
      </details>
      <details>
        <summary>③ 群发欢迎 &amp; 朋友圈</summary>
        <p>操作指南 👉 <a href="https://doc.weixin.qq.com/doc/w3_AdsAzQa3AGECNV7EPvR08Q0ORpmGh?scode=AHIAYgeZABIoQwxDvgAdsAzQa3AGE" target="_blank">《企业微信群发操作手册》</a></p>
      </details>
      <p class="back"><a href="#top">↑ 回顶部</a></p>
    </section>

    <!-- STEP 2 -->
    <section id="step2">
      <h2>步骤 2 · 团购 / 外卖（预计 2–5 天完成）</h2>
      <details open>
        <summary>操作流程</summary>
        <ol>
          <li>填写资料表 👉 <a href="https://doc.weixin.qq.com/smartsheet/s3_AdsAzQa3AGECNquiMWGQXQl0S31E7?scode=AHIAYgeZABIyaM1IbTAdsAzQa3AGE&amp;tab=q979lj&amp;viewId=vKlKA2" target="_blank">《开店信息表》</a>（营业执照、门头照）。<br><em>填完后请在企业微信私聊“是否已填表”</em></li>
          <li>总部审核后，分别在 <strong>京东外卖 / 快手团购 / 抖音团购</strong> 创建门店账号，并把 <strong>登录名+初始密码</strong> 通过企业微信发给店长。</li>
          <li>店长完成：修改密码 → 完善门店信息 → 参考各平台手册：<br>
            • <a href="LINK4A" target="_blank">京东外卖</a> | <a href="LINK4B" target="_blank">快手团购</a> | <a href="LINK4C" target="_blank">抖音团购</a>
          </li>
        </ol>
      </details>
      <p class="back"><a href="#top">↑ 回顶部</a></p>
    </section>

    <!-- STEP 3 -->
    <section id="step3">
      <h2>步骤 3 · 顾客活动群</h2>
      <details open>
        <summary>操作 2 步</summary>
        <ol>
          <li>每月 15 日在企业微信收到 👉 <a href="LINK5" target="_blank">《活动素材包》</a></li>
          <li>替换日期 &amp; 价格 → 群发到福利群。</li>
        </ol>
      </details>
      <p class="back"><a href="#top">↑ 回顶部</a></p>
    </section>

    <!-- STEP 4 -->
    <section id="step4">
      <h2>步骤 4 · 拍短视频</h2>
      <p style="color:var(--red);"><strong>重要：</strong>总部提供脚本模板，门店可自由发挥。</p>
      <details open>
        <summary>操作 3 步</summary>
        <ol>
          <li>注册抖音账号（昵称“远东街+门店名”）。</li>
          <li>下载脚本 👉 <a href="https://kdocs.cn/l/cadEalhOATr6" target="_blank">《15 秒拍摄脚本》</a></li>
          <li>发视频并填写登记表（脚本底部有链接）。</li>
        </ol>
      </details>
      <p class="back"><a href="#top">↑ 回顶部</a></p>
    </section>
  </main>

  <footer>© <span id="year"></span> 远东街运营部</footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
    new QRCode(document.getElementById('qrcode'),{
      text:'https://work.weixin.qq.com/u/vc7c72b6770a64a688?v=4.1.38.48842&bb=f99ef5aab1',
      width:160,
      height:160
    });
  </script>
</body>
</html>
